/**
 * Created by Administrator on 2017/12/4.
 */
import React from 'react';
import $ from 'jquery'
import Link from '../common/Link'
import {
    R_header_fixed
} from '../common/index'
import Sunflower from './img/sunflower.jpg'
import {
    viewerImg,
    AjaxUploadImgUrl,
    HttpService,
    fmtDate,
    Tips
} from '../../Tools'
import Popup from '../common/popup'
import {
    dateFormat
} from '../../Tools';
import './style/viewer.min.css'
import './style/business.scss'
import Arrow from './img/arrow.png'
import fail from './img/fail.png'
export  default  class GoodsDetail extends React.Component {
    constructor(props) {
        super(props);
        this.goodId = '';
        this.goodDatas={};
        this.state = {
            goodDatas: '',
            flag: false
        }
        this.config = {
            isSure: false,
            isCancel: false,
            tip:true,
            yes:'确定',
            no: '取消',
            content:`<div class="tipimg"><img  src=${fail} /><p>你确认删除该商品吗？</p></div>`,
            yes_cb: () => {
                var rec = this;
                HttpService.query({
                    url: '/jf/business/goodsArchives/del',
                    data: {
                        token: localStorage.btoken,
                        goodsArchId: rec.props.params.goodId
                    },
                    success: (res => {
                        if (res.code = "50006") {
                            Tips(res.data);
                            rec.context.router.push('/goodsManage')
                        } else {
                            Tips(res.data);
                        }
                    })
                })
            },
            no_cb: () => {
                this.setState({
                    flag: false
                });
            }
        };
    }

    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };

    componentWillMount() {
        var rec = this;
        HttpService.query({
            url: '/jf/business/goodsArchives/getJfGoodsArch',
            data: {
                token: localStorage.btoken,
                goodsArchId: rec.props.params.goodId
            },
            success: (res => {
                if (res.code = "10140") {
                    let result = res.data;
                    result.beginTime = fmtDate(result.beginTime);
                    result.endTime = fmtDate(result.endTime);
                    result.createTime = fmtDate(result.createTime);
                    result.smallImg = JSON.parse(result.smallImg).goodsDetailsImg
                    // let img=goodDatas.smallImg.split("&")[1];
                    var type = '';
                    switch (result.goodsType) {
                        case 1:
                            type = '免费券'
                            break
                        case 2:
                            type = '特价券'
                            break
                        case 3:
                            type = '抵用券'
                            break
                        case 4:
                            type = '折扣券'
                            break
                        default:
                    }
                    result.type = type;
                    rec.goodDatas=result;
                    var editaddress=[];
                    if (result.listArea.length > 0) {
                        rec.goodDatas.show = "是"

                        //地址
                        const uuid=result.listArea[0].areaId;
                        if (uuid == 'china') {
                            rec.goodDatas.address = '全国'
                        } else {
                            $.ajax({
                                url: '/region/getPRegion.json ?uuid='+uuid,
                                type: "post",
                                async:false,
                                success: function (res) {
                                    let addr=res.data;
                                    let uuid=addr.uuid;
                                    editaddress.push(addr.childOrgName)
                                    editaddress.push(addr.orgName)
                                    $.ajax({
                                        url: '/region/getPRegion.json ?uuid='+uuid,
                                        type: "post",
                                        async:false,
                                        success: function (res) {
                                            let addr=res.data;
                                            if(addr.puuid=='china'){
                                                editaddress.push(addr.orgName)
                                                rec.goodDatas.address=editaddress[2]+editaddress[1]+editaddress[0];
                                            }else if(addr.uuid){
                                                editaddress.push(addr.orgName)
                                            }
                                        }
                                    })
                                }
                            })
                        }
                        //使用对象
                        if (result.listArea[0].putRange == "1") {
                            rec.goodDatas.target='老师'
                        } else if (result.listArea[0].putRange == "2") {
                            rec.goodDatas.target='家长'
                        } else if (result.listArea[0].putRange == "0") {
                            rec.goodDatas.target='老师 家长'
                        }

                    }else{
                        rec.goodDatas.target="--";
                        rec.goodDatas.address="--"
                        rec.goodDatas.show="否"
                    }
                    rec.goodDatas.getNumber = result.totalNum - result.actualNum;
                    rec.goodDatas.unUsed = result.totalNum - result.actualNum - result.goodsUsedTime;
                    rec.goodDatas.used = result.goodsUsedTime;

                    rec.setState({
                        goodDatas: result
                    })
                } else {
                    Tips(res.data)
                }
            })
        })

    }

    componentDidMount() {
        //商品图片查看大图
        let viewer = new Viewer(document.getElementById('jq22'), {
            url: 'data-original'
        });
    }

    //商品编辑
    editClick() {
        let goodId = this.props.params.goodId
        this.context.router.push('/addGoods/' + goodId)
    }

    //商品删除
    deleteClick() {
        this.setState({
            flag: true
        });
    }

    render() {
        const goodDatas= this.goodDatas;
        const{flag}=this.state;
        return (
            <div >
                <R_header_fixed left="1" title="商品详情"/>
                <Popup config={this.config} blockOrNone={flag} _flag={flag}/>
                <div className="goodsDetail">
                    <ul className="goods-info">
                        <li>
                            <label htmlFor="">商品名称：</label>
                            <span>{goodDatas.name}</span>
                        </li>
                        <li>
                            <label htmlFor="">商品编号：</label>
                            <span>{goodDatas.uuid}</span>
                        </li>
                        <li>
                            <label htmlFor="">商品类型：</label>
                            <span>{goodDatas.type}</span>
                        </li>
                        <li>
                            <label htmlFor="">使用对象：</label>
                            <span>{goodDatas.target}</span>
                        </li>
                        <li>
                            <label htmlFor="">商品地区：</label>
                            <span>{goodDatas.address}</span>
                        </li>
                        <li>
                            <label htmlFor="">商品价值：</label>
                            <span>{goodDatas.consumeCredit}</span>

                        </li>
                        <li>
                            <label htmlFor="">是否展示： </label>
                            <span className="fcolor">{goodDatas.show}<span
                                className="extraTip">（选择是则代表商品可在积分商城中进行展示）</span></span>
                        </li>
                        <li>
                            <label htmlFor="">券有效期：</label>
                            <span>{goodDatas.beginTime + '~' + goodDatas.endTime}</span>
                        </li>
                        <li>
                            <label htmlFor="">商品库存：</label>
                            <span className="fcolor">{goodDatas.totalNum}</span>
                        </li>
                        <li>
                            <label htmlFor="">商品图片：</label>
                            <div className="goodpic" id="jq22">
                                <img className="showImg" data-original={goodDatas.smallImg} src={goodDatas.smallImg}
                                     alt="商品图片"/>
                                <span className="preLook">(点击预览)</span>
                            </div>
                        </li>
                        <li>
                            <label htmlFor="">商品介绍：</label>
                            <span dangerouslySetInnerHTML={{__html:decodeURIComponent(goodDatas.contents)}}  />
                        </li>
                        <li>
                            <label htmlFor="">创建时间：</label>
                            <span>{goodDatas.createTime}</span>
                        </li>

                    </ul>
                    <div className="statistics">
                        <div className="leftBox">
                            <div >领取量：<span className="fcolor">{goodDatas.getNumber}</span></div>
                            <div> 未使用：<span className="fcolor">{goodDatas.unUsed}</span></div>
                        </div>
                        <div className="rightBox">
                            <div > 已使用：<span className="fcolor">{goodDatas.used}</span></div>
                            <div className="guide">
                                <Link to={'/useInfo/' + goodDatas.id + '/' + goodDatas.getNumber + '/' + goodDatas.unUsed + '/' + goodDatas.used}>
                                    <img src={Arrow}/>
                                </Link>
                            </div>
                        </div>

                    </div>
                    <div className="opt">
                        <button className="btn Btn" onClick={this.editClick.bind(this)}>编辑</button>
                        <button className="btn delete" onClick={this.deleteClick.bind(this)}>删除</button>
                    </div>
                </div>
            </div>
        )
    }
}
